<template>
  <div class="EmergencyDetail">
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'应急处置流程'" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">
            <p>响应命令单详情</p>
            <div class="flexAround fontSize18 margin5-0">
              <div v-for="(item, index) in flows" :key="index">
                {{ item.operationName }}
              </div>
            </div>
            <el-steps :active="active" align-center>
              <el-step v-for="(item, i) in flows" :key="i">
                <template slot="icon">
                  <span class="yuandian1 ydBgcolor"></span>
                </template>
                <template slot="title">
                  <div class="fontWeight textNowrap">{{ item.operationTime }}</div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
            <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" />
            <div slot="slot2">
              <div class="cuoshi-box">
                <span class="label">有关措施及要求：</span>
                <LsdTable slot="cxyq" :autoHeight="tableList.autoHeight" :paginationAtrrs="paginationAtrrs" :compRef="tableList.compRef" ref="gjxm" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" />
              </div>
            </div>
            <div slot="slot3">
              <DialogForm ref="formComponent2" :formConfig="formConfig2" />
            </div>
            <div slot="slot4">
              <DialogForm ref="formComponent3" :formConfig="formConfig3" />
            </div>
            <div slot="slot5">
              <DialogForm ref="formComponent4" :formConfig="formConfig4" />
            </div>
          </LsdDialogTitle>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
// import { detailList } from "@/api/EarlyWarningManagement/yjtzd"
import {
  getinfo,
  getjudgelist,
  getOperateFlowApi,
  getLeftFlowApi
} from "@/api/EmergencyDisposal/xymld";
export default {
  name: "ResponseDetail",
  components: { TimeLine },
  props: ["ifId"],
  data() {
    return {
      // 弹窗表单信息
      formConfig4: {
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "approvalOpinion",
            class: "sjgy",
            lableWidth: "153px",
            option: [],
            isDisabled: true
          },
          {
            type: "input",
            label: "审批人",
            prop: "approvalUser",
            class: "third",
            disabled: true,
            lableWidth: "153px",
            isDisabled: true
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "approvalDept",
            class: "third",
            disabled: true,
            lableWidth: "153px",
            isDisabled: true
          },
          {
            type: "input",
            label: "审批时间",
            prop: "approvalTime",
            class: "third",
            disabled: true,
            lableWidth: "153px",
            isDisabled: true
          }
        ]
      },
      formConfig3: {
        formData: [
          // {
          //   type: "select",
          //   label: "应急事件",
          //   prop: "emergencyEvent",
          //   class: "sjgy",
          //   lableWidth: "100px",
          //   option: []
          // },
          {
            type: "input",
            label: "填报人",
            prop: "creator",
            class: "third",
            lableWidth: "153px",
            isDisabled: true
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            class: "third",
            lableWidth: "153px",
            isDisabled: true
          },
          {
            type: "input",
            label: "填报时间",
            prop: "createTime",
            class: "third",
            lableWidth: "153px",
            isDisabled: true
          }
        ]
      },
      // 弹窗表单信息
      formConfig2: {
        formData: [
          {
            type: "input",
            label: "主送单位",
            prop: "mainUnitName",
            class: "sjgy",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          },
          {
            type: "input",
            label: "响应部门",
            prop: "responseDeptName",
            class: "sjgy",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          },
          {
            type: "input",
            label: "联系人",
            prop: "linkman",
            class: "sjgy",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          },
          {
            type: "input",
            label: "抄报",
            prop: "outTheNewspaper",
            class: "half",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          },
          {
            type: "input",
            label: "抄送",
            prop: "sendDuplicate",
            class: "half",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          }
        ]
      },
      tableList: {
        isSelectFlag: true,
        compRef: "cxyq",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        autoHeight: true,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            measureRequire: "",
            dutyDeptId: ""
          }
        ],
        columns: [
          {
            prop: "measureRequire",
            label: "有关措施及要求",
            align: "left",
            // "min-width": "200px",
            formatter: (row, column, cellValue, index) => {
              return row.measureRequire;
            }
          },
          {
            prop: "unitDeptId",
            label: "部门/单位",
            align: "center",
            "width": "249px",
            formatter: (row, column, cellValue, index) => {
              return row.unitDeptName;
            }
          }
        ],
        tableAttr: {
          // "max-height": "300px",
          // height: "300px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      paginationAtrrs: {
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper",
        "current-page": 1,
        "page-size": 10,
        "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      // 弹窗表单信息
      formConfig: {
        formData: [
          {
            type: "input",
            label: "响应命令单",
            prop: "responseName",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "153px"
          },
          {
            type: "input",
            label: "响应研判单",
            prop: "judgeName",
            class: "sjgy",
            lableWidth: "153px",
            isShow: true,
            isDisabled: true
          },
          {
            type: "input",
            label: "事件类别",
            prop: "eventName",
            class: "half",
            isDisabled: true,
            lableWidth: "153px"
          },
          {
            type: "input",
            label: "响应级别",
            prop: "responseLvName",
            class: "half",
            isDisabled: true,
            lableWidth: "153px"
          },
          {
            type: "input",
            label: "影响范围",
            prop: "effectRange",
            class: "half",
            isDisabled: true,
            lableWidth: "153px"
          },
          {
            type: "input",
            label: "影响时间",
            prop: "effectTime",
            class: "half",
            isDisabled: true,
            lableWidth: "153px"
          },
          {
            type: "input",
            label: "事件概要",
            prop: "incidentOutline",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "153px"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "措施要求",
          name: "2",
          slot: "slot2"
        },
        {
          title: "响应信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "审批信息",
          name: "5",
          slot: "slot5"
        }
      ],
      activeNames: ["1", "2", "3", "4", "5"],
      active: 0,
      activities: [],
      dwjbmlist: [
      ],
      spxxform: {
        yj: "同意!",
        spr: "朱望林",
        dwjbm: "国网湖北省电力有限公司",
        spsj: "2021-08-12 09:52:00"
      },
      tbxxform: {
        tbr: "赵爱国",
        dwjbm: "国网湖北省电力有限公司安监部",
        tbsj: "2021-08-12 09:51:00"
      },
      cslist: [],
      cblist: [],
      lxrlist: [],
      xybmlist: [],
      zsdwlist: [],
      form: {},
      tableData: [],
      flows: []
    };
  },
  watch: {
    ifId: {
      handler(val) {
        if (val) {
          this.getinfo(val);
          this.getOperateFlow(val);
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getInputVal();
  },
  methods: {
    // 获取下拉框数据
    getInputVal() {
      this.formConfig.formData.forEach((item) => {
        if (item.dic) {
          getjudgelist().then(res => {
            const option = res.map((item) => {
              return {
                label: item.judgeName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
    },
    back() {
      this.$router.back();
    },
    async getinfo(id) {
      const res = await getinfo({ id });
      if (res) {
        this.$set(this.$refs.formComponent, "form", res);
        this.$set(this.$refs.formComponent2, "form", res);
        this.tableList.tableData = res.emergencyMeasureListVos;
        this.$set(this.$refs.formComponent3, "form", res);
        this.$set(this.$refs.formComponent4, "form", res);
        this.form = res;

        // this.activities = res.flowListVos
        this.getWarningLeftFlow(res.emergencyId);
      }
    },
    // 获取操作流程
    async getOperateFlow(id) {
      try {
        const res = await getOperateFlowApi({ id });
        this.flows = res;
        this.active = res.length;
      } catch (err) {
        console.log(err);
      }
    },
    async getWarningLeftFlow(emergencyId) {
      try {
        const res = await getLeftFlowApi({ emergencyId });
        this.activities = res;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";
:deep(.el-dialog__body) {
  height: 93% !important;
}
:deep(.sjgy) {
  width: 100%;

  .el-form-item__content {
    flex: 1;
  }
}
:deep(.EmergencyList-dialog-form-item) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cuoshi-box {
  display: flex;

  .label {
    width: 146px;
    min-width: 146px;
    font-size: 16px;
    color: #606266;
    text-align: right;
  }

  & > div {
    width: 100%;
  }
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

:deep(.el-step.is-horizontal .el-step__line) {
  top: 17px;
}

.yuandian1 {
  display: inline-block;
  background-color: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.ydBgcolor {
  background-color: #246dfd;
  box-shadow: 0px 0px 8px 0px rgb(10, 99, 241);
}

.EmergencyDetail {
  width: 100%;
  height: 100%;

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 0 30px;

      .EmergencyDetail-titel {
        // width: 98%;
        // margin: 0 auto;
        position: relative;
        padding: 20px 0;
        border-bottom: solid 1px #ccc;

        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }

        .InformationDetail-btn {
          position: absolute;
          right: 5px;
          top: 50px;
          text-align: right;

          .el-button--small {
            padding: 8px 18px;
          }
        }
      }

      .EmergencyDetail-zt {
        // width: 98%;
        height: 74%;
        overflow-y: auto;
        // margin: 0 auto;
        padding-right: 20px;
      }
    }
  }
}
</style>
